<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="" prop="id">
				<el-input
						v-model="queryParams.id"
						placeholder="请输入"
						clearable
						@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="文章ID" prop="articleId">
				<el-input
						v-model="queryParams.articleId"
						placeholder="请输入文章ID"
						clearable
						@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
					<el-option
						v-for="dict in dict.type.sys_normal_disable"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="dateRange"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['btn.Article.add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['btn.Article.update']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['btn.Article.remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['btn.Article.export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<!-- 表单组件 -->
		<el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="" align="center" prop="id" v-if="false" />
			<el-table-column label="文章ID" :show-overflow-tooltip="true" align="center" prop="articleId" />
			<el-table-column label="标题" align="center" prop="title" />
			<el-table-column label="文章作者的ID" align="center" prop="authorId" />
			<el-table-column label="作者昵称" align="center" prop="authorName" />
			<el-table-column label="文章所属频道ID" align="center" prop="channelId" />
			<el-table-column label="频道名称" align="center" prop="channelName" />
			<el-table-column label="文章标记" align="center" prop="flag" />
			<el-table-column label="文章图片" :show-overflow-tooltip="true" align="center" prop="images" />
			<el-table-column label="文章标签最多3个 逗号分隔" align="center" prop="labels" />
			<el-table-column label="点赞数量" align="center" prop="likes" />
			<el-table-column label="收藏数量" align="center" prop="collection" />
			<el-table-column label="评论数量" align="center" prop="comment" />
			<el-table-column label="阅读数量" align="center" prop="views" />
			<el-table-column label="创建时间" align="center" prop="createdTime" />
			<el-table-column label="发布时间" align="center" prop="publishTime" />
			<el-table-column label="同步状态" align="center" prop="syncStatus" />
			<el-table-column label="来源" align="center" prop="origin" />
			<el-table-column label="文章链接" :show-overflow-tooltip="true" align="center" prop="staticUrl" />
			<el-table-column label="状态" align="center" prop="status">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
          <el-button v-if="scope.row.syncStatus==0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handlePublish(scope.row)"
            v-hasPermi="['btn.Article.publish']"
          >发布</el-button>
          <el-button v-if="scope.row.syncStatus==1"
                     size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handlePublish(scope.row)"
                     v-hasPermi="['btn.Article.publish']"
          >取消发布</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['btn.Article.update']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['btn.Article.remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination :current-page="queryParams.current" :total="total" :page-size="queryParams.size" style="padding: 30px 0; text-align: center;"
			layout="total, prev, pager, next, jumper" @current-change="getList" />
		<!-- 添加或修改Article对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="" prop="id">
					<el-input v-model="form.id" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="文章ID" prop="articleId">
					<el-input v-model="form.articleId" placeholder="请输入文章ID" />
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入标题" />
				</el-form-item>
				<el-form-item label="文章作者的ID" prop="authorId">
					<el-input v-model="form.authorId" placeholder="请输入文章作者的ID" />
				</el-form-item>
				<el-form-item label="作者昵称" prop="authorName">
					<el-input v-model="form.authorName" placeholder="请输入作者昵称" />
				</el-form-item>
				<el-form-item label="文章所属频道ID" prop="channelId">
					<el-input v-model="form.channelId" placeholder="请输入文章所属频道ID" />
				</el-form-item>
				<el-form-item label="频道名称" prop="channelName">
					<el-input v-model="form.channelName" placeholder="请输入频道名称" />
				</el-form-item>
				<el-form-item label="文章标记" prop="flag">
					<el-input v-model="form.flag" placeholder="请输入文章标记" />
				</el-form-item>
				<el-form-item label="文章图片
            多张逗号分隔" prop="images">
					<el-input v-model="form.images" placeholder="请输入文章图片
            多张逗号分隔" />
				</el-form-item>
				<el-form-item label="文章标签最多3个 逗号分隔" prop="labels">
					<el-input v-model="form.labels" placeholder="请输入文章标签最多3个 逗号分隔" />
				</el-form-item>
				<el-form-item label="点赞数量" prop="likes">
					<el-input v-model="form.likes" placeholder="请输入点赞数量" />
				</el-form-item>
				<el-form-item label="收藏数量" prop="collection">
					<el-input v-model="form.collection" placeholder="请输入收藏数量" />
				</el-form-item>
				<el-form-item label="评论数量" prop="comment">
					<el-input v-model="form.comment" placeholder="请输入评论数量" />
				</el-form-item>
				<el-form-item label="阅读数量" prop="views">
					<el-input v-model="form.views" placeholder="请输入阅读数量" />
				</el-form-item>
				<el-form-item label="创建时间" prop="createdTime">
					<el-input v-model="form.createdTime" placeholder="请输入创建时间" />
				</el-form-item>
				<el-form-item label="发布时间" prop="publishTime">
					<el-input v-model="form.publishTime" placeholder="请输入发布时间" />
				</el-form-item>
				<el-form-item label="同步状态" prop="syncStatus">
					<el-input v-model="form.syncStatus" placeholder="请输入同步状态" />
				</el-form-item>
				<el-form-item label="来源" prop="origin">
					<el-input v-model="form.origin" placeholder="请输入来源" />
				</el-form-item>
				<el-form-item label="" prop="staticUrl">
					<el-input v-model="form.staticUrl" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="岗位顺序" prop="postSort">
					<el-input-number v-model="form.postSort" controls-position="right" :min="0" />
				</el-form-item>
				<el-form-item label="岗位状态" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio
							v-for="dict in dict.type.sys_normal_disable"
							:key="dict.value"
							:label="dict.value"
						>{{dict.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<!-- js脚本 -->
<script>
import {
  syncArticle,
  delArticleById,
  addArticle,
  updateArticleById,
  getArticleById,
  loadDataList,
  publishArticle
} from "@/api/pcwl/article";
export default {
	name: "Article",
	dicts: ['sys_normal_disable'],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 岗位表格数据
			articleList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				id: undefined,
				articleId: undefined,
				title: undefined,
				authorId: undefined,
				authorName: undefined,
				channelId: undefined,
				channelName: undefined,
				flag: undefined,
				images: undefined,
				labels: undefined,
				likes: undefined,
				collection: undefined,
				comment: undefined,
				views: undefined,
				createdTime: undefined,
				publishTime: undefined,
				syncStatus: undefined,
				origin: undefined,
				staticUrl: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				id: [
					{ required: true, message: "不能为空", trigger: "blur" }
				],
				articleId: [
					{ required: true, message: "文章ID不能为空", trigger: "blur" }
				],
				title: [
					{ required: true, message: "标题不能为空", trigger: "blur" }
				],
				authorId: [
					{ required: true, message: "文章作者的ID不能为空", trigger: "blur" }
				],
				authorName: [
					{ required: true, message: "作者昵称不能为空", trigger: "blur" }
				],
				channelId: [
					{ required: true, message: "文章所属频道ID不能为空", trigger: "blur" }
				],
				channelName: [
					{ required: true, message: "频道名称不能为空", trigger: "blur" }
				],
				flag: [
					{ required: true, message: "文章标记文章不能为空", trigger: "blur" }
				],
				images: [
					{ required: true, message: "文章图片多张逗号分隔不能为空", trigger: "blur" }
				],
				labels: [
					{ required: true, message: "文章标签最多3个 逗号分隔不能为空", trigger: "blur" }
				],
				likes: [
					{ required: true, message: "点赞数量不能为空", trigger: "blur" }
				],
				collection: [
					{ required: true, message: "收藏数量不能为空", trigger: "blur" }
				],
				comment: [
					{ required: true, message: "评论数量不能为空", trigger: "blur" }
				],
				views: [
					{ required: true, message: "阅读数量不能为空", trigger: "blur" }
				],
				createdTime: [
					{ required: true, message: "创建时间不能为空", trigger: "blur" }
				],
				publishTime: [
					{ required: true, message: "发布时间不能为空", trigger: "blur" }
				],
				syncStatus: [
					{ required: true, message: "同步状态不能为空", trigger: "blur" }
				],
				origin: [
					{ required: true, message: "来源不能为空", trigger: "blur" }
				],
				staticUrl: [
					{ required: true, message: "不能为空", trigger: "blur" }
				],
			}
		};
	},
	created() {
    syncArticle();
		this.getList();
	},
	methods: {
		/** 查询文章信息表，存储已发布的文章列表 */
		getList(currentPage=1) {
			this.loading = true;
			this.queryParams.current=currentPage;
			loadDataList(this.queryParams).then(response => {
			// loadDataList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      //   console.log(response);
				this.articleList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},

		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				articleId: undefined,
				title: undefined,
				authorId: undefined,
				authorName: undefined,
				channelId: undefined,
				channelName: undefined,
				flag: undefined,
				images: undefined,
				labels: undefined,
				likes: undefined,
				collection: undefined,
				comment: undefined,
				views: undefined,
				createdTime: undefined,
				publishTime: undefined,
				syncStatus: undefined,
				origin: undefined,
				staticUrl: undefined,
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.articleId)
			this.single = selection.length!=1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加文章信息表，存储已发布的文章";
		},
    /** 发布按钮操作 */
    handlePublish(row) {
      this.reset();
      const id = row.id || this.ids
      publishArticle(id).then(response => {
        this.getList();
      });
    },
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const articleId = row.articleId || this.ids
			getArticleById(articleId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改文章信息表，存储已发布的文章";
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.articleId != undefined) {
						updateArticleById(this.form,this.form.articleId).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addArticle(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const articleId = row.articleId || this.ids;
			this.$modal.confirm('是否确认删除文章信息表，存储已发布的文章编号为"' + id + '"的数据项？').then(function() {
				return delArticleById(articleId);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('article/export', {
				...this.queryParams
			}, `post_${new Date().getTime()}.xlsx`)
		}
	}
};
</script>
